<template>
	<view class="content">
		<subBtn @sub="handleSub" :subtxt='subtxt'></subBtn>
		<!--		<view class="text-area">
			<text class="title">{{title}}</text>
			&lt;!&ndash; <u-button type="primary">主要按钮</u-button> &ndash;&gt;
		</view>-->
		<view class="form-content">
			<subform :data="data" :rules="rulesData" @ok="handleSub" />
		</view>

		<!--		<view>-->
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!--			<u&#45;&#45;form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u&#45;&#45;input v-model="model1.userInfo.name" border="none"></u&#45;&#45;input>
				</u-form-item>
				<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
					<u&#45;&#45;input style="pointer-events: none;" v-model="model1.userInfo.sex" :disabled="false" readonly
						placeholder="请选择性别" border="none"></u&#45;&#45;input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u&#45;&#45;form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>-->
		<!--		</view>-->
		<!--
		<view class="tips">{{tips}}</view>
		-->


	</view>
</template>

<script>
	import subform from "../../components/subform";
	export default {
		data() {
			return {
				tips: '',
				title: '首页',
				showSex: false,
				model1: {
					userInfo: {
						name: 'uniapp-vue2-uViewUI',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				data: [{
						componentName: 'u-input', // 组件名称，这里跟u-view组件名称必须对应, 必传
						name: 'nickName', // 组件model名称，必传
						label: '名称', // label名称, 必传
						value: '', // 组件绑定值, 必传
						placeholder: '请输入名称',
						prop: 'nickName', // 验证name
						type: 'text'
					},
					{
						componentName: 'u-textarea', // 组件名称，这里跟u-view组件名称必须对应, 必传
						name: 'nickName1', // 组件model名称，必传
						label: '名称text', // label名称, 必传
						value: '', // 组件绑定值, 必传
						placeholder: '请输入名称',
						prop: 'nickName1', // 验证name
						type: 'text'
					},
					{
						componentName: 'u-radio', // 组件名称，这里跟u-view组件名称必须对应, 必传
						name: 'nickName2', // 组件model名称，必传
						label: '名称text1', // label名称, 必传
						value: '', // 组件绑定值, 必传
						placeholder: '请输入名称',
						prop: 'nickName2', // 验证name
						children: [{
								name: 1,
								label: '选项1'
							},
							{
								name: 2,
								label: '选项2'
							},
							{
								name: 3,
								label: '选项3'
							}
						]
					},
					{
						componentName: 'u-action', // 组件名称，这里跟u-view组件名称必须对应, 必传
						name: 'nickName3', // 组件model名称，必传
						label: '名称text3', // label名称, 必传
						value: '', // 组件绑定值, 必传
						placeholder: '请输入名称',
						prop: 'nickName3', // 验证name
						children: [{
							name: '测试1',
							value: 1
						}, {
							name: '测试2',
							value: 2
						}], // radio，action组件子集数据
						show: false, // 是否显示
					},
					{
						componentName: 'u-upload', // 组件名称，这里跟u-view组件名称必须对应, 必传
						name: 'nickName4', // 组件model名称，必传
						label: '名称text4', // label名称, 必传
						value: '', // 组件绑定值, 必传
						placeholder: '请输入名称',
						prop: 'nickName4', // 验证name
						type: 'text',
					},
					// {
					//   componentName: 'u-select', // 组件名称，这里跟u-view组件名称必须对应
					//   label: '名称',
					//   value: '',
					//   children: [],
					//   placeholder: '请输入名称',
					//   prop: 'nickName'
					// },
					// {
					//   componentName: 'u-radio', // 组件名称，这里跟u-view组件名称必须对应
					//   label: '名称',
					//   value: '',
					//   children: [],
					//   placeholder: '请输入名称',
					//   prop: 'nickName'
					// }
				],
				rulesData: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'nickName1': {
						type: 'string',
						required: true,
						message: '请填写姓名1',
						trigger: ['change']
					},
					'nickName2': {
						type: 'number',
						required: true,
						message: '请填写姓名2',
						trigger: ['change']
					},
					'nickName3': {
						type: 'number',
						required: true,
						message: '请填写姓名3',
						trigger: ['change']
					},
					'nickName4': {
						type: 'array',
						required: true,
						message: '请填写姓名6',
						trigger: ['change']
					},
				}
			}
		},
		onLoad() {
			console.log("load")
		},
		/*		onShow: function() {
				},
				onReady() {
					//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
					this.$refs.uForm.setRules(this.rules)
				},
				methods: {
					sexSelect(e) {
						this.model1.userInfo.sex = e.name
						this.$refs.uForm.validateField('userInfo.sex')
					},
					
				},*/
		methods: {
			handleSub(val) {
				console.log("页面", val)
			},
		},
		components: {
			subform,
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.form-content {
		width: 100%;
		height: auto;
	}

	::v-deep .form-content .u-form-item__body__right_no_flex {
		width: 100%;
		height: auto;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		margin-top: 100rpx;
	}

	.tips {
		margin-top: 100rpx;
	}
</style>